import { AppSidebar } from "~/registry/miami/blocks/sidebar-12/components/app-sidebar"
import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbList,
   BreadcrumbPage,
} from "~/registry/miami/ui/breadcrumb"
import { Separator } from "~/registry/miami/ui/separator"
import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
} from "~/registry/miami/ui/sidebar"

export default function Page() {
   return (
      <SidebarProvider>
         <AppSidebar />
         <SidebarInset>
            <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
               <SidebarTrigger className="-ml-1" />
               <Separator orientation="vertical" className="mr-2 h-4" />
               <Breadcrumb>
                  <BreadcrumbList>
                     <BreadcrumbItem>
                        <BreadcrumbPage>October 2024</BreadcrumbPage>
                     </BreadcrumbItem>
                  </BreadcrumbList>
               </Breadcrumb>
            </header>
            <div className="flex flex-1 flex-col gap-4 p-4">
               <div className="grid auto-rows-min gap-4 md:grid-cols-5">
                  {Array.from({ length: 20 }).map((_, i) => (
                     <div
                        key={i}
                        className="aspect-square rounded-xl bg-muted/50"
                     />
                  ))}
               </div>
            </div>
         </SidebarInset>
      </SidebarProvider>
   )
}
